<template>
  <view class="class-page">
    <template v-if="!hasClass">
      <view class="empty-class-top-title">班级</view>
      <view class="empty-class-btns2">
        <button class="empty-btn2 join" @click="goJoin">加入班级</button>
        <button class="empty-btn2 create" @click="goCreate">创建班级</button>
      </view>
      <view class="empty-class-feature">
        <view class="feature-title">班级功能介绍</view>
        <view class="feature-desc">
          班级主要用于老师布置阅读或配音作业，多人组团打卡或同学之间共同学习等场景。<br />
          <view class="feature-list">
            <view class="feature-item">1. 会员用户才能创建班级，老师可以<text class="link">免费申请终身会员，立即申请 ></text></view>
            <view class="feature-item">2. 老师布置的作业，班级所有成员可以<text class="link">免费阅读作业</text></view>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <!-- 顶部班级信息栏 -->
      <view class="header">
        <view class="header-title">班级</view>
        <view class="class-info">
          <view class="class-name">{{ classList[currentClassIndex].name }}<text class="member-count">(1人)</text></view>
          <view class="actions">
            <text class="switch" @click="openClassModal">切换</text>
            <text class="divider">|</text>
            <text class="manage" @click="goManage">班级管理</text>
          </view>
        </view>
        <view class="class-extra">
          <view class="class-code-label">班级口令：</view>
          <view class="class-code">215815877</view>
          <button class="invite-btn">+邀请成员</button>
        </view>
      </view>

      <!-- Tab切换栏 -->
      <view class="tabs">
        <view :class="['tab', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">作业</view>
        <view :class="['tab', activeTab === 1 ? 'active' : '']" @click="activeTab = 1">
          打卡<text class="red">0/2</text>
        </view>
        <view :class="['tab', activeTab === 2 ? 'active' : '']" @click="activeTab = 2">成员</view>
      </view>

      <view v-if="activeTab === 0" class="tab-content">
        <!-- 创建作业按钮 -->
        <button class="create-btn" @click="goCreateWork">创建作业</button>
        <!-- 作业卡片 -->
        <view class="work-card">
          <image class="work-icon" src="/src/static/images/book1.svg" mode="aspectFit" />
          <view class="work-info">
            <view class="work-title">06月24日作业</view>
            <view class="work-status-row">
              <text class="work-status">未完成</text>
            </view>
            <view class="work-meta">
              2025-06-24 13:45:46发布 0/2人已完成
            </view>
          </view>
        </view>
        <view class="no-data">没有数据了</view>
      </view>
      <view v-else-if="activeTab === 1" class="tab-content punch-tab punch-tab-optim">
        <!-- 顶部蓝色按钮 -->
        <view class="punch-top-btn-wrap">
          <button class="punch-top-btn" @click="goPunch">今日读了{{ todayCount }}本，打个卡</button>
        </view>
        <!-- 打卡卡片列表 -->
        <view class="punch-card-new" v-for="item in punchList" :key="item.id">
          <view class="punch-card-header">
            <image class="avatar-img" :src="item.avatar || '/src/static/images/default-avatar.png'" />
            <view class="user-info">
              <view class="user-name">{{ item.name }}</view>
              <view class="user-desc">打卡第{{ item.days }}天，读了{{ item.total }}本</view>
            </view>
            <view class="time">{{ item.time }}</view>
          </view>
          <view class="punch-content">{{ item.content }}</view>
          <view class="read-count">读了{{ item.count }}本</view>
          <view class="book-list">
            <view v-for="book in item.books" :key="book.id" class="book-card" :style="{ background: book.color }">
              <view class="book-dot"></view>
              <view class="book-title">{{ book.title.length > 10 ? book.title.slice(0,10)+'...' : book.title }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="activeTab === 2" class="tab-content member-tab">
        <view class="member-card" v-for="item in memberList" :key="item.id">
          <view class="member-avatar" :style="{background: item.bgColor}">{{ item.avatarText }}</view>
          <view class="member-info">
            <view class="member-row">
              <view class="member-name">{{ item.name }}</view>
              <view class="member-tags">
                <view v-if="item.isTeacher" class="tag tag-teacher">老师</view>
                <view v-if="item.isMe" class="tag tag-me">我</view>
                <view v-if="item.notSign" class="tag tag-nosign">未打卡</view>
              </view>
            </view>
            <view class="member-desc">阅读{{ item.days }}天，读了{{ item.count }}本</view>
          </view>
        </view>
      </view>
      <view v-else class="tab-content empty-tab">
        <view class="no-data">没有数据了</view>
      </view>

      <view v-if="showClassModal" class="class-modal-mask" @click="closeClassModal">
        <view class="class-modal">
          <view v-for="(item, idx) in classList" :key="item.id" class="class-modal-item" @click="selectClass(idx)">
            <text>{{ item.name }}</text>
            <text v-if="currentClassIndex === idx" class="class-modal-check">✔</text>
          </view>
          <view class="class-modal-divider"></view>
          <view class="class-modal-action" @click.stop="goCreate">创建新班级</view>
          <view class="class-modal-action" @click.stop="goJoin">加入新班级</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
const activeTab = ref(0)
const hasClass = ref(true)

// 班级切换相关
const classList = ref([
  { id: 1, name: '五年级（3）班' },
  { id: 2, name: '五年级四班' },
])
const currentClassIndex = ref(1)
const showClassModal = ref(false)
function openClassModal() { showClassModal.value = true }
function closeClassModal() { showClassModal.value = false; console.log(123) }
function selectClass(idx) {
  currentClassIndex.value = idx
  closeClassModal()
}
const punchList = ref([
  {
    id: 1,
    name: '吴老师',
    avatar: '',
    days: 2,
    total: 3,
    count: 3,
    time: '5小时前',
    content: '哈哈哈哈',
    books: [
      { id: 1, title: 'Fun at the Beach', color: '#FFA726' },
      { id: 2, title: 'The Panda', color: '#64B5F6' },
      { id: 3, title: 'Who am I', color: '#43A047' },
    ],
  },
  {
    id: 2,
    name: '吴老师',
    avatar: '',
    days: 1,
    total: 2,
    count: 2,
    time: '3天前',
    content: '今天读了2本书',
    books: [
      { id: 1, title: 'The Panda', color: '#64B5F6' },
      { id: 2, title: 'Who am I', color: '#43A047' },
    ],
  },
])
const todayCount = computed(() => punchList.value.length > 0 ? punchList.value[0].count : 0)
const memberList = ref([
  {
    id: 1,
    name: '吴老师',
    avatarText: '吴',
    bgColor: '#7C6FF4',
    days: 1,
    count: 4,
    isTeacher: true,
    isMe: true,
    notSign: false,
  },
  {
    id: 2,
    name: '李思',
    avatarText: '李',
    bgColor: '#36CFC9',
    days: 0,
    count: 0,
    isTeacher: false,
    isMe: false,
    notSign: true,
  },
])

function goJoin() {
  closeClassModal()
  uni.navigateTo({ url: '/pages-sub/class/join' })
}
function goCreate() {
  closeClassModal()
  uni.navigateTo({ url: '/pages-sub/class/create' })
}
function goCreateWork() {
  uni.navigateTo({ url: '/pages-sub/class/create-work' })
}
function goPunch() {
  uni.navigateTo({ url: '/pages-sub/class/punch' })
}
function goManage() {
  uni.navigateTo({ url: '/pages-sub/class/manage' })
}
</script>

<style lang="scss" scoped>
.class-page {
  background: #f7f8fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  background: #fff;
  padding: 24rpx 32rpx 16rpx 32rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 16rpx;
  }
  .class-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-name {
      font-size: 32rpx;
      font-weight: 500;
      .member-count {
        color: #888;
        font-size: 26rpx;
      }
    }
    .actions {
      font-size: 26rpx;
      color: #409eff;
      .divider {
        margin: 0 8rpx;
        color: #ccc;
      }
    }
  }
  .class-extra {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
    .class-code-label {
      color: #888;
      font-size: 26rpx;
    }
    .class-code {
      font-weight: bold;
      margin: 0 12rpx;
      font-size: 28rpx;
    }
    .invite-btn {
      background: linear-gradient(90deg, #36d1ff, #5bdeff);
      color: #fff;
      border: none;
      border-radius: 32rpx;
      font-size: 26rpx;
      padding: 8rpx 28rpx;
      margin-left: 16rpx;
    }
  }
}
.tabs {
  display: flex;
  background: #fff;
  border-bottom: 2rpx solid #f0f0f0;
  .tab {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    padding: 24rpx 0 18rpx 0;
    color: #888;
    position: relative;
    &.active {
      color: #36d1ff;
      font-weight: bold;
      border-bottom: 4rpx solid #36d1ff;
    }
    .red {
      color: #ff4d4f;
      font-size: 24rpx;
      margin-left: 4rpx;
    }
  }
}
.tab-content {
  flex: 1;
  padding: 32rpx 24rpx 0 24rpx;
  .create-btn {
    width: 100%;
    background: linear-gradient(90deg, #36d1ff, #5bdeff);
    color: #fff;
    border: none;
    border-radius: 32rpx;
    font-size: 30rpx;
    padding: 18rpx 0;
    margin-bottom: 32rpx;
  }
  .work-card {
    display: flex;
    background: #fff;
    border-radius: 24rpx;
    box-shadow: 0 2rpx 12rpx #e6f7ff;
    padding: 24rpx;
    margin-bottom: 32rpx;
    align-items: center;
    .work-icon {
      width: 64rpx;
      height: 64rpx;
      margin-right: 24rpx;
    }
    .work-info {
      flex: 1;
      .work-title {
        font-size: 32rpx;
        font-weight: 500;
        margin-bottom: 8rpx;
      }
      .work-status-row {
        margin-bottom: 8rpx;
        .work-status {
          color: #ff9800;
          background: #fff7e6;
          border-radius: 8rpx;
          font-size: 24rpx;
          padding: 2rpx 12rpx;
        }
      }
      .work-meta {
        color: #888;
        font-size: 24rpx;
      }
    }
  }
  .no-data {
    text-align: center;
    color: #bbb;
    font-size: 28rpx;
    margin-top: 48rpx;
  }
}
.empty-tab {
  padding: 64rpx 0 0 0;
}
.punch-tab-optim {
  padding: 0 24rpx 120rpx 24rpx;
  background: #f7f8fa;
  min-height: 100vh;
  .punch-top-btn-wrap {
    display: flex;
    justify-content: center;
    margin-block: 36rpx;
  }
  .punch-top-btn {
    background: linear-gradient(90deg, #36d1ff, #5bdeff);
    color: #fff;
    border: none;
    border-radius: 32rpx;
    font-size: 28rpx;
    padding: 12rpx 0;
    width: 70%;
    font-weight: bold;
    box-shadow: 0 2rpx 8rpx #b3e5fc33;
    letter-spacing: 2rpx;
    min-height: 56rpx;
  }
  .punch-card-new {
    background: #fff;
    border-radius: 32rpx;
    box-shadow: 0 8rpx 32rpx #e6f7ffcc;
    padding: 36rpx 32rpx 28rpx 32rpx;
    margin-bottom: 36rpx;
    display: flex;
    flex-direction: column;
    .punch-card-header {
      display: flex;
      align-items: center;
      margin-bottom: 18rpx;
      .avatar-img {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background: #e0e0e0;
        margin-right: 18rpx;
        border: 2rpx solid #f0f0f0;
      }
      .user-info {
        flex: 1;
        .user-name {
          font-size: 30rpx;
          font-weight: bold;
          color: #222;
          margin-bottom: 2rpx;
        }
        .user-desc {
          font-size: 24rpx;
          color: #8a8a8a;
        }
      }
      .time {
        font-size: 24rpx;
        color: #bdbdbd;
        margin-left: 12rpx;
        white-space: nowrap;
      }
    }
    .punch-content {
      font-size: 30rpx;
      font-weight: 600;
      color: #222;
      margin-bottom: 10rpx;
      line-height: 1.5;
    }
    .read-count {
      font-size: 24rpx;
      color: #8a8a8a;
      margin-bottom: 16rpx;
    }
    .book-list {
      display: flex;
      flex-direction: row;
      gap: 32rpx;
      margin-top: 2rpx;
      .book-card {
        width: 140rpx;
        height: 172rpx;
        border-radius: 28rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6rpx 24rpx #e0e0e099;
        position: relative;
        transition: box-shadow 0.2s;
        .book-dot {
          width: 44rpx;
          height: 44rpx;
          border-radius: 50%;
          background: #fff200;
          margin-bottom: 20rpx;
          box-shadow: 0 2rpx 8rpx #fff8;
        }
        .book-title {
          font-size: 28rpx;
          color: #fff;
          font-weight: bold;
          text-align: center;
          padding: 0 10rpx;
          line-height: 1.3;
        }
      }
    }
  }
}
.tabbar {
  display: flex;
  background: #fff;
  border-top: 2rpx solid #f0f0f0;
  height: 100rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  .tabbar-item {
    flex: 1;
    text-align: center;
    padding: 12rpx 0 0 0;
    .tabbar-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
    }
    .tabbar-text {
      font-size: 22rpx;
      color: #888;
    }
    &.active .tabbar-text {
      color: #36d1ff;
      font-weight: bold;
    }
  }
}
.member-tab {
  padding: 0 24rpx 120rpx 24rpx;
  background: #f7f8fa;
  min-height: 100vh;
  margin-top: 36rpx;
  .member-card {
    display: flex;
    align-items: center;
    background: #fafdff;
    border-radius: 36rpx;
    box-shadow: 0 4rpx 18rpx #e6f7ff66;
    border: 1rpx solid #e6f7ff;
    padding: 44rpx 36rpx 36rpx 36rpx;
    margin-bottom: 40rpx;
    min-height: 120rpx;
    transition: box-shadow 0.2s, transform 0.2s;
    &:hover {
      box-shadow: 0 12rpx 36rpx #b3e5fc55;
      transform: translateY(-4rpx) scale(1.02);
    }
    .member-avatar {
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
      color: #fff;
      font-size: 44rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 28rpx;
      box-shadow: 0 4rpx 16rpx #e0e0e055;
      background: linear-gradient(135deg, #7C6FF4 60%, #36CFC9 100%);
      border: 4rpx solid #fff;
    }
    .member-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .member-row {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        .member-name {
          font-size: 36rpx;
          font-weight: bold;
          color: #222;
          margin-right: 16rpx;
        }
        .member-tags {
          display: flex;
          gap: 12rpx;
          .tag {
            font-size: 26rpx;
            padding: 6rpx 22rpx;
            border-radius: 22rpx;
            font-weight: 600;
            margin-left: 4rpx;
            box-shadow: 0 2rpx 8rpx #e0e0e033;
            border: none;
            letter-spacing: 1rpx;
            &.tag-teacher {
              background: #f5f7fa;
              color: #7C6FF4;
              border: 1rpx solid #7C6FF4;
            }
            &.tag-me {
              background: #eaffea;
              color: #52c41a;
              border: 1rpx solid #52c41a;
            }
            &.tag-nosign {
              background: #fff1f0;
              color: #ff4d4f;
              border: 1rpx solid #ff4d4f;
            }
          }
        }
      }
      .member-desc {
        font-size: 26rpx;
        color: #4caf50;
        font-weight: 500;
        letter-spacing: 1rpx;
        margin-top: 2rpx;
      }
    }
  }
}
.empty-class-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding-top: 80rpx;
  .empty-class-img-box {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4rpx 24rpx #b3e5fc33;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36rpx;
    border: 6rpx solid #aee571;
  }
  .empty-class-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    object-fit: cover;
  }
  .empty-class-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 18rpx;
  }
  .empty-class-desc {
    font-size: 26rpx;
    color: #888;
    margin-bottom: 40rpx;
  }
  .empty-class-btns {
    display: flex;
    gap: 32rpx;
    .empty-btn {
      font-size: 28rpx;
      padding: 16rpx 48rpx;
      border-radius: 32rpx;
      border: none;
      font-weight: 600;
      &.join {
        background: linear-gradient(90deg, #36d1ff, #5bdeff);
        color: #fff;
        box-shadow: 0 2rpx 8rpx #b3e5fc33;
      }
      &.create {
        background: #fff;
       color: #1890ff;
        border: 2rpx solid #1890ff;
      }
    }
  }
}
.empty-class-top-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 48rpx;
  margin-bottom: 64rpx;
  letter-spacing: 2rpx;
}
.empty-class-btns2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rpx;
  margin-bottom: 56rpx;
  .empty-btn2 {
    width: 320rpx;
    font-size: 28rpx;
    padding: 18rpx 0;
    border-radius: 16rpx;
    border: none;
    font-weight: 600;
    background: #1890ff;
    color: #fff;
    box-shadow: 0 2rpx 8rpx #b3e5fc33;
    margin: 0 auto;
    &.create {
      background: #fff;
      color: #1890ff;
      border: 2rpx solid #1890ff;
    }
  }
}
.empty-class-feature {
  margin: 0 36rpx;
  margin-top: 32rpx;
  .feature-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 18rpx;
    color: #222;
  }
  .feature-desc {
    font-size: 24rpx;
    color: #444;
    line-height: 1.8;
    .feature-list {
      margin-top: 12rpx;
      .feature-item {
        margin-bottom: 8rpx;
        color: #444;
        font-size: 24rpx;
        .link {
          color: #1890ff;
          font-size: 24rpx;
          margin-left: 4rpx;
        }
      }
    }
  }
}
.class-modal-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.32);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.class-modal {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  box-shadow: 0 8rpx 32rpx #e6f7ff99;
  padding: 36rpx 0 24rpx 0;
  margin-bottom: 32rpx;
  .class-modal-item {
    font-size: 32rpx;
    color: #222;
    padding: 24rpx 48rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    &:active {
      background: #f7f8fa;
    }
  }
  .class-modal-check {
    color: #1890ff;
    font-size: 36rpx;
    margin-left: 12rpx;
  }
  .class-modal-divider {
    height: 2rpx;
    background: #f0f0f0;
    margin: 12rpx 0 8rpx 0;
  }
  .class-modal-action {
    font-size: 28rpx;
    color: #1890ff;
    text-align: center;
    padding: 18rpx 0;
    cursor: pointer;
    font-weight: 600;
    &:active {
      background: #f7f8fa;
    }
  }
}
</style>
